/*.containter {
  width:320px;
  margin:auto;
}*/

.calender-wrap {
  animation:clafade .3s ease;
  -webkit-animation:clafade .3s ease;
  -moz-animation:clafade .3s ease;
  
  padding:5px;
  background:#fff;
  width: 320px;
  box-shadow:0 5px 10px rgba(0,0,0,0.2);
  border-radius:4px;
  position:relative;
  /*font-family:"Microsoft yahei";*/
  position:absolute;
  z-index:1000;
}

.calender-wrap {
  border:1px solid #e2e2e2;
}

.calender-wrap:after {
  content:'';
  display:inline-block;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:7px solid #eee;
  border-top:0;
  border-bottom-color:#d7d7d7;
  position:absolute;
  left:9px;
  top:-7px;
}

.calender-wrap:before {
  content:'';
  display:inline-block;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid #ffffff;
  border-top:0;
  position:absolute;
  left:10px;
  top:-6px;
  z-index:10;
}

.calender-caption {
  height:35px;
  border-bottom:1px solid #ddd;
  z-index:2;
  background:#eee;
}

.calender-content {
  position:relative;
  overflow:hidden;
}

.calender-content:after {
  content:'';
  display:block;
  clear:both;
}

.calender-cell {
  cursor:pointer;
  float:left;
  width:14.28571428%;
  height:35px;
  text-align:center;
  line-height:35px;
  font-size:12px;
  color:#000;
  z-index:1;
  border-bottom:1px solid #eee;
}

.calender-cell:hover {
  background:#eee;
}

.calender-caption .calender-cell:hover {
  background:none;
}

.calender-cell-dark {
  cursor:no-drop;
  color:#b9b9b9;
}

.calender-caption .calender-cell {
  height:35px;
  line-height:35px;
  font-size:13px;
  color:#111;
  font-weight:bold;
}

.calender-header {
  text-align:center;
  line-height:35px;
  text-align:center;
  color:#888;
  padding-bottom:4px;
  margin-bottom:1px;
  background:#fff;
  position:relative;
  border-bottom:1px solid #e6e6e6;
  font-size:14px;
}

#calender-prev,#calender-next {
  text-decoration:none;
  display:block;
  width:14.2857%;
  height:35px;
  background:#fff;
  position:absolute;
  left:0%;
  top:0px;
  /*font-family:'宋体';*/
  font-size:14px;
  color:#555;
}

#calender-prev,#calender-next {
  color:#999;
  font-size:16px;
}

#calender-prev:hover,#calender-next:hover {
  background:#eee;
  border-radius:5px;
  color:#222;
}

#calender-next {
  left:auto;
  right:0%;
}

#calender-year,#calender-mon {
  cursor:pointer;
  padding:2px 4px;
  border-radius: 3px;
  margin:0 3px;
}

#calender-year:hover,#calender-mon:hover {
  background:#eee;
}

.calender-list {
  overflow:hidden;
}

.calender-list2,.calender-list3 {
  display:none;
}

.calender-year-cell,.calender-mon-cell { 
  width:32.41%;
  float:left;
  border-radius:4px;
  text-align:center;
  font-size:12px;
  padding:15px 0;
  border:1px solid #fff;
}

.calender-year-cell:hover,.calender-mon-cell:hover {
  background:#eee;
  cursor:pointer;
}

.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
  background:#23acf1;
  color:#fff;
}

.calender-cell.active:hover,
.calender-year-cell.active:hover,
.calender-mon-cell.active:hover {
  background:#23acf1;
  color:#fff;
}

.calender-button { 
  border-top:1px solid #eee;
  width:100%;
  margin-top:-1px;
  padding:7px 0px 2px 0;
  overflow:hidden;
}

.calender-button a {
  display:block;
  text-align:center;
  padding:0px 15px;
  height: 25px; 
  line-height: 25px; 
  float:right;
  background:#23acf1;
  color:#fff;
  margin-right:5px;
  cursor:pointer;
  margin-left:5px;
  font-size:12px;
  text-decoration:none;
}

.calender-button a:hover { 
  background:#0084c9;
}

.calender-wrap.year .calender-list,
.calender-wrap.month .calender-list {
  display:none;
}

.calender-wrap.year .calender-list2 {
  display:block;
}

.calender-wrap.month .calender-list3 {
  display:block;
}

@keyframes clafade {
  0% {transform:scale(0.95);opacity:0}
  100%{transform:scale(1);opacity:1}
}

@-webkit-keyframes clafade {
  0%{-webkit-transform:scale(0.95);opacity:0}
  100%{-webkit-transform:scale(1);opacity:1}
}}